<template>
  <div style="text-align: center"><h1 >场地预约</h1>
  <div class="my-div">

    <el-select
      v-model="value"
      placeholder="场地"
      size="large"
      style="width: 200px"
    >
      <el-option
        v-for="item in field"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-select v-model="value" placeholder="场次" style="width: 200px">
      <el-option
        v-for="item in times"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="value" placeholder="时间" style="width: 200px">
      <el-option
        v-for="item in ss"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div style="text-align: center">
      <button @click="say('ee')" text-alien="center" class="pretty-button">预约</button>
    </div>
    <div>
      <el-button @click="z=!z" type="info">预约须知</el-button>
      <div v-if="z" style="color:white;">入场要求：

        所有人员凭有效证件方可入场，并在入场前进行身份核验。
        未满18周岁的未成年人需在父母或法定监护人的陪同下方可入场，并需签署免责声明。
        患有传染病或医生明确禁止运动的人员禁止入场。
      </div>
    </div>
    <el-button type="warning" @click="k()">刷新页面</el-button>
  </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { method } from "lodash-es";

const value = ref('')
const z=ref(false)
const k=()=>{
  location.reload();
}
const say=(msg)=>{
  ElMessage.success("预约成功")
  // ElMessage.error("预约失败")
  // ElMessage.info(msg)
}
// 场地类型
const field = [
  {
    value: 'Option1',
    label: '羽毛球场',
  },
  {
    value: 'Option2',
    label: '篮球场',
  },
  {
    value: 'Option3',
    label: '足球场',
  },
  {
    value: 'Option3',
    label: '排球场',
  },

]
// 场次
const times = [
  {
    value: 'Option1',
    label: '第一场',
  },
  {
    value: 'Option1',
    label: '第二场',
  },
  {
    value: 'Option1',
    label: '第三场',
  },
  {
    value: 'Option1',
    label: '第四场',
  },
  {
    value: 'Option1',
    label: '第五场',
  },
  {
    value: 'Option1',
    label: '第六场',
  },
]
const ss = [
  {
    value: 'Option1',
    label: '8.00-10.00',
  },
  {
    value: 'Option1',
    label: '12.00-14.00',
  },
  {
    value: 'Option1',
    label: '14.00-16.00',
  },
  {
    value: 'Option1',
    label: '16.00-18.00',
  },
  {
    value: 'Option1',
    label: '18.00-20.00',
  },
  {
    value: 'Option1',
    label: '20.00-22.00',
  },
]
</script>
<style scoped lang="scss">
.pretty-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #4CAF50; /* 绿色背景 */
  border: none;
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时变为小手图标 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}
.pretty-button:hover {
  background-color: #45a049; /* 悬停时背景色变暗 */
}

.my-div {
  /* 设置背景图片 */
  background-image: url('img.png');
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 其他可选的样式属性 */
  //width: 500px; /* 设置div的宽度 */
  //height: 300px; /* 设置div的高度 */
  background-repeat: no-repeat; /* 图片不重复 */
  background-size: cover; /* 图片覆盖整个div，可能会被裁剪 */
  /* 或者使用 background-position: center center; 来居中图片 */
}

</style>